@extends('layouts.app')

@section('content')
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="relative" id="main">
                @foreach($files as $file)
                    <div class="max-xl absolute cursor-pointer" id="file-{{$loop->index}}" onclick="copy('{{$file->file}}')">
                        <img src="{{$file->file}}" />
                    </div>
                @endforeach
            </div>
            <div class="flex justify-center">
                {!! $files->appends(Request::except('page'))->render() !!}
            </div>
        </div>
    </div>



    <script>
        var data = @json($files);
        console.log(data)
        const geometry = justifiedLayout(data.data.map(d => {
            return d.width/d.height
        }), {
            targetRowHeight: '180',
            containerWidth: $('#main').outerWidth(),
            showWidows: true,
        })
        $('#main').css({
            height: geometry.containerHeight + 'px'
        })
        geometry.boxes.forEach((item, index) => {
            $('#file-' + index).css({
                top: item.top + 'px',
                width: item.width + 'px',
                height: item.height + 'px',
                left: item.left + 'px'
            }).find('img').css({
                width: item.width + 'px',
                height: item.height + 'px',
            })
        })
        console.log(geometry )
    </script>
@endsection
